<script setup>
import {reactive} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
const searchForm = reactive({
  height: '',
})

// 应用卡片数据
const appList = reactive([
  {
    id: 1,
    name: '应用名称',
    type: '市本级应用',
    category: '教务管理',
    expireDate: '2025.08.08',
    status: '已授权'
  },
  {
    id: 2,
    name: '应用名称',
    type: '市本级应用',
    category: '教务管理',
    expireDate: '2025.08.08',
    status: '已授权'
  },
  {
    id: 3,
    name: '应用名称',
    type: '市本级应用',
    category: '教务管理',
    expireDate: '2025.08.08',
    status: '已过期'
  }
])

// 设为常用
const setFrequent = (id) => {
  console.log('设为常用', id)
}

// 删除应用
const deleteApp = (id) => {



// 为保护信息安全，应用删除后将同步删除相关的用户信息授权！
//
// 如您需要再次使用，需前往教育应用广场添加

  ElMessageBox.alert(
      '为保护信息安全，应用删除后将同步删除相关的用户信息授权！<br> <i>如您需要再次使用，需前往教育应用广场添加</i> ',
      '确定要删除该应用吗？',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true,
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {
      })
  console.log('删除应用', id)
}
</script>

<template>
  <div class="appCot">
    <div class=" ">
      <el-form :model="searchForm" label-width="70px">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="应用名称">
              <el-input v-model="searchForm.height" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="级别" label-position="left">
              <el-select v-model="searchForm.height" placeholder="请选择">
                <el-option label="全部" value="1"></el-option>
                <el-option label="已启用" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="应用状态">
              <el-select v-model="searchForm.height" placeholder="请选择">
                <el-option label="全部" value="1"></el-option>
                <el-option label="已启用" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="card">
      <el-row :gutter="20">
        <el-col v-for="app in appList" :key="app.id" :span="4" class="mb-20">
          <el-card class="app-card" shadow="hover">
            <div class="app-header">
              <div class="app-icon">
                <img alt="AI" class="ai-logo" src="@/assets/images/ai.png"/>
              </div>
              <div class="app-status">

              </div>
            </div>
            <div class="app-info">
              <div class="info-item">
                <span class="label">应用名称</span>
                <el-tag :type="app.status === '已授权' ? 'primary' : 'danger'" effect="light" size="Default">
                  {{ app.status }}
                </el-tag>
              </div>
              <div class="expire-date">
                <span>市本级应用：{{ app.category }}</span>
              </div>
              <div class="expire-date">
                <span>到期日期：{{ app.expireDate }}</span>
              </div>
            </div>
            <div class="app-actions">
              <el-button round size="small" type="primary" @click="setFrequent(app.id)">设为常用</el-button>
              <el-button round size="small" type="danger" @click="deleteApp(app.id)">删除应用</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/styles/userDefined.scss";

.appCot {
  background: white;
  height: 100%;
  padding: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

:deep(.el-card__body) {
  padding: 0;
}

.app-card {
  //height: 240px;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background-color: #f0f5ff;
  color: #3963A6;
}

.app-header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.app-icon {
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ai-logo {
  //width: 60px;
  //height: 60px;
}

.app-info {
  flex: 1;
  margin: 10px 0;
}

.info-item {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

.label {
  font-size: 14px;
  font-weight: bold;
}


.expire-date {
  font-size: 14px;
  margin: 8px 0;
}

.app-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>
